<template>
	<div class='pass'>
		<header class='seek'>
			<span class='iconfont icon-tao span'></span>
			<div class='seek_div'>
				<input v-model="val" placeholder="搜索店铺"  class='input'>
			</div>
		</header>
		<div class='body'>
			<div class='swipe'>
				<mt-swipe :auto="3000">
				  <mt-swipe-item v-for='(item,index) in lun' :key='index'><a><img :src='item.src'></a></mt-swipe-item>
				</mt-swipe>
			</div>
			<div class='tabss'>
				<div class='tabss-show' v-for='(item,index) in tabs' :key='index'>
					<div class='tabss-show-div' v-for='(i,sum) in item' :key='sum'>
						<a :href="i.path">
							<img :src='i.src'>
							<p>{{i.tab}}</p>
						</a>
						
					</div>
				</div>
			</div>
			<div class='channel'>
				<div class='box'>
					<div class='box-brand' v-for='(item,index) in brand' :key='index'>
						<a :href='item.path'>
							<div class='box-brand-title'>
								{{item.title}}
							</div>
							<div class='box-brand-bottom' :style='{"backgroundImage":"url("+item.src+")"}'></div>
						</a>
					</div>
				</div>
				<div class='bottom'>
					<div class='bottom_div'>
						<b class='span_1'>淘宝头条</b>
						<span class='span_2'>精华</span>
						<span class='span_3'>为什么白颜色的衣服更好看</span>
					</div>
				</div>
			</div>
			<div class='lead'>
				--你可能还喜欢--
				
			</div>
		</div>
		<br>
		<div class='guide'>
			<div class='goods' @touchend='skip(item)' v-for='(item,index) in listdata' :key='index'>
				<div class='goods_img'>
					<img :src='item.imgs[0]'>
				</div>
				<div class='goods_referral'>{{item.title}}</div>
				<div class='goods_price'>
					<span class='price_1'>￥  {{item.price}} </span><span class='price_2'>{{item.odl?`${item.odl}人已购买`:''}}</span>
				</div>
			</div>
		</div>
		<div class='pass_footer'>
			<div><a href="https://h5.m.taobao.com/bcec/downloadTaobao.html">下载淘宝app</a></div>
		</div>
		<div class='go-top' v-show='go_top' @touchend='return_top'>
			<span class='iconfont icon-zhiding'></span>
			<div>顶部</div>
		</div>
	</div>
</template>

<script>
	
	export default {
		methods:{
		    opt(item){
				console.log(item);
			}	
		},
		data(){
			return{
				val:'',
				lun:[],
				tabs:[],
				brand:[],
				go_top:false,//是否显示回到顶部
				data:[],
				listdata:[],
			}
		},
		methods:{
		    return_top(){
				document.documentElement.scrollTop=0;
			},
			skip(item){
				this.$router.push(`${item.path}`);//跳转到详情页
			}
		},
		created() {
			// this.$http.get('/src/assets/data/goods.json').then(res=>{
			// 	this.data=res.data;
			// 	//console.log(this.data);
			// })
			this.$http.get('/src/DetailsPage.json').then(res=>{
				for(var key in res.data){
					this.listdata.push(res.data[key]);
				}
				//console.log(res.data);
			})
			//获取选项卡信息
			this.$http.get('/src/assets/data/tabs.json').then(res=>{
				this.tabs=res.data;
			});
			//获取频道信息
			this.$http.get('/src/assets/data/brand.json').then(res=>{
				this.brand=res.data;
				// console.log(this.brand)
			});
			//获取轮播信息
			this.$http.get('/src/assets/data/lun.json').then(res=>{
				this.lun=res.data;
			})
			var path=function(){
				// vw.$router.push('/guide');
				
			}
			var vw=this;
			var onec=true;
				window.onscroll=function(e){
				    var scrollTop=document.documentElement.scrollTop;
				    var scrollHeight=document.documentElement.scrollHeight;
					var clientHeight=document.documentElement.clientHeight;
					//如果滚动条到顶部的高度加上，可视区的高度，约等于滚动条的高度，那么加载guide组件
					if(onec){
						if((scrollTop+clientHeight+20)>scrollHeight){
						    setTimeout(()=>{
								path();
						    },500);
						} 
						onec=false;
					}
					if((scrollTop+clientHeight+20)>scrollHeight){
						vw.$http.get('/src/DetailsPage.json').then(res=>{
							console.log(res);
							for(let key in res.data){
								vw.listdata.push(res.data[key]);
							}
						
						})
					}
					//如果滚动条到顶部的高度，大于可视区的一半，显示回到顶部按钮；
				    if(scrollTop>clientHeight/2){
						vw.go_top=true;
					}
					//如果滚动条在顶部
					if(scrollTop==0){
						vw.go_top=false;
					}
			    	
				}
		}
	}
</script>

<style lang='less' scoped>
	.pass{
	     background-color: rgba(240,240,240,1);
		 overflow: auto;
	}
	a{
		text-decoration: none;
		color: block;
	}
	.body{
		height:100vh;
		width: 100vw;
		padding-top:37px;
		.swipe{
		    height: 7.867rem;
			width: 100%; 
			a{
				width: 100%;
				height: 7.867rem;
				img{
					width: 100%;
					height:100%;
				}
			}
			mt-swipe{
				height:100%;
				width: 100%;
				
			}
		}
		.tabss{
			font-size:12px;
			height:175px;
			overflow-x:auto;
			display:flex;
	        background-color: white;
			.tabss-show{
				margin-left:13px;
				width:61px;
				height:100%;
				a{
					color:black;
				}
				
				img{
					width: 61px;
					height:48px;
				}
			}
			
		}
		.channel{
			width:23rem;
			/* height:22rem; */
			margin-top:12px;
			margin-left:1rem;
			margin-left:1rem;
			background-color: white;
			border-radius: 15px;
			
		    .box{
				font-weight: 800;
				color:black;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;
				.box-brand{
					
					width:5rem;
					height:6rem;
					
					.box-brand-title{
					    height:1.4rem;
						font-size: 0.8rem;
					}
					.box-brand-bottom{
						height:4.6rem;
						width:100%;
						background-size: 100%;;
					}
				}
			}
			.bottom{
				margin-top:10px;
				border-top:1px solid rgba(200,200,200,0.6);
				.bottom_div{
					padding: 1rem;
					height: 1rem;
					line-height: 1rem;
					.span_1{
						font-size:1rem;
					}
					.span_2{
						background-color:bisque;
						font-size:0.6rem;
						color:chocolate;
						border-radius:0.3rem;
					}
					.span_3{
					    font-size:0.6rem;
					}
				}
			
			}
		}
		.link-show{
			margin-top: 10px;
		}
		.lead{
			text-align: center;
			color:red;
			font-size:1rem;
			padding: 1rem;
		}
	}
	.pass_footer{
		height:3.33rem;
		line-height: 3.33rem;
		background-color: grey;
		padding-bottom: 50px;
		text-align: center;
		font-size: 2rem;
	}
	.go-top{
		position:fixed;
		right:0;
		background-color: white;
		bottom: 100px;
	    height:44px;
		line-height: 44px;
		width: 44px;
		border:1px solid grey;
		border-radius: 50%;
		text-align: center;
		color:gray;
	}
	.seek{
		position:fixed;
		z-index: 1000;
		height:37px;
		background-color: #d4b8a4;
		width:100vw;
		font-size:16px;
		display: flex;
		.span{
			flex:0;
			line-height: 37px;
			display:block;
			text-indent: 10px;
			color: white;
			font-size: 25px;
			width:45px;
		}
		.seek_div{
			flex:1;
			text-align: center;
			.input{
				margin-top:6px;
				width: 95%; 
				height: 25px;
				outline: none;
				border: none;
				border-radius: 5px;
			}
		}
	}
	.guide{
		
	    display: flex;
		justify-content:space-around ;
		flex-wrap: wrap;
		overflow: auto;
	    .goods{
			background-color: white;
			font-size: 0.6rem;
			width:11.4rem;
			height:17.2rem;
			border-radius: 1rem;
			overflow: hidden;
			margin-top: 0.5rem;
			.goods_img{
				height:11.3rem;
				width:100%;
				img{
					width:100%;
					height:100%;
				}
			}
			.goods_referral{
				box-sizing: border-box;
				height:3rem;
				padding: 1rem;
				padding-right:1rem;
				padding-bottom:1rem;
				margin-bottom: 1rem;
				width:100%;
				overflow: hidden;
			}
			.goods_price{
				padding-left: 1rem;
				padding-right: 1rem;
				.price_1{
					color:red;
				}
				.price_2{
					color:gray;
				}
			}
		}	
	}
</style>
